<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="utf-8" />
		<title>Příklad 3-2</title>
		<meta name="author" content="Daniel Bielczyk" />
	</head>
	<body style="margin: 0; padding: 0;">
		
		<canvas width="400" height="400" id="canvas"></canvas>
    
<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;

context.fillRect(10, 10, 40, 40);
context.strokeRect(10, 10, 40, 40);

context.fillStyle = "red";

context.fillRect(65, 10, 40, 40);
context.strokeRect(65, 10, 40, 40);

context.fillRect(120, 10, 40, 40);
context.strokeRect(120, 10, 40, 40);

context.strokeStyle = "#00f";

context.fillRect(175, 10, 40, 40);
context.strokeRect(175, 10, 40, 40);

context.strokeStyle = context.fillStyle;
context.fillStyle = "hsl(120, 100%, 50%)"; //zelená

context.fillRect(230, 10, 40, 40);
context.strokeRect(230, 10, 40, 40);

</script>
		
	</body>
</html>